import { useState, useEffect, useRef } from 'react';
import { CommonHeader } from "@/components";
import styles from './index.less';

export default function PenentrationViews() {
  // 集成ht的demo
  const htContainerRef = useRef(HTMLElement as any);
  useEffect(() => {
    var dataModel = new ht.DataModel();
    var graphView = new ht.graph.GraphView(dataModel);

    var view = graphView.getView();
    view.style.width = "100%";
    view.style.height = "100%";
    htContainerRef.current.appendChild(view);


    // 生成节点的逻辑，可抽象成公共方法
    var node = new ht.Node();
    node.setName("国网运行一张图");
    node.setPosition(200,200);
    dataModel.add(node);

    var node1 = new ht.Node();
    node1.setName("国网运行一张图12");
    node1.setPosition(400,200);
    dataModel.add(node1);

    // edge
    var edge = new ht.Edge(node, node1);
    dataModel.add(edge);


    console.log(node1.getEdges(), 'edges');


  }, [])


  return (
    <div className={styles.penentrationViews}>
      <CommonHeader title="国网运行一张图" />
      <div ref={htContainerRef} className={styles.htContainer}>12312321312</div>
    </div>
  );
}
